<!DOCTYPE html>
<html>
<head>
	<title>用户详情 -- 快件e栈服务平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<link href="css/normalize.css" type="text/css" rel="stylesheet" />
	<link href="css/common.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.min.js" type="text/javascript"></script>
	<script src="js/notice.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/regexp.js" type="text/javascript"></script>
	<script src="layer/layer.js"></script>
	<style type="text/css">
		.userInfoEditCont{
			width: 100%;
		}
		.userInfoEditCont  .userInfoIcon{
			width: 20%;
			margin: 0px auto 10px;
		}
		.userInfoEditCont  .nickName{
			font-size: 14px;
			text-align: center;
			font-weight: bold;
		}

		/* -----  cover ----- */
		#coverCont{
			position: absolute;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: rgba(0,0,0,0.5);
			z-index: 1000;
			display: none;
		}
		.userTypeCont{
			position: absolute;
			top: 0px;
			left: 0px;
			z-index: 1001;
			width: 80%;
			background: #f4f4f4;
			border: 1px solid #f1f1f1;
			border-radius: 5px;
			padding: 20px 0px 30px;
			display: none;
		}
		.userTypeCont .userTypeTitle{
			text-align: center;
			font-size: 18px;
			font-weight: bold;
			padding: 10px 0px;
		}
		.userTypeCont .userType{
			width: 90%;
			margin: 5px auto;
			overflow: hidden;
		}
		.userTypeCont .userType .teacherType{
			width: 45%;
			padding: 10px 2%;
			float: left;
			border: 1px solid #f1f1f1;
			background: #fff;
		}
		.userTypeCont .userType .studentType{
			width: 45%;
			padding: 10px 2%;
			float: right;
			border: 1px solid #f1f1f1;
			background: #fff;
		}
		.userType .typeImg{
			width: 50%;
			margin: 0px auto 5px;
		}
		.userType .typeTitle{
			text-align: center;
			line-height: 30px;
			font-weight: bold;
			color: #333333;
		}
		.userType .typeDesc{
			font-size: 12px;
			color: #888888;
			line-height: 20px;
			text-align: center;
		}

		.submitBtn{
			width: 90%;
			margin: 0 auto 20px;
			text-align: center;
			line-height: 46px;
			border-radius: 23px;
			background: #888888;
			color: #fff;
			font-weight: bolder;
		}

		.userSelectCont{
			width: 100%; 
			background: #fff;
			font-size: 14px;
			overflow: hidden;
			position: fixed;
			left: 0px;
			bottom: 0px;
			display: none;
			z-index: 999;
		}
		.userSelectCont .userSelectTitle{
			width: 90%;
			padding: 0px 5%; 
			background: #fff;
			overflow: hidden;
			border-bottom: 1px solid #f1f1f1;
		}
		.userSelectCont .userSelectTitle .selectCancelBtn{
			float: left;
			color: #1f72ff;
			font-weight: bold;
			line-height: 35px;
		}
		.userSelectCont .userSelectTitle .selectOkBtn{
			float: right;
			color: #1f72ff;
			font-weight: bold;
			line-height: 35px;
		}
		.userSelectCont  .selectNumCont{
			width: 90%;
			padding: 0px 5%;
		}
		.userSelectCont  .selectNumCont .selectNum{
			overflow: hidden;
			padding: 10px 0px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectTitle{
			float: left;
			width: 100px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv{
			float: left;
			width: calc(100% - 100px);
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv ul{
			list-style: none;
			margin: 0px;
			padding: 0px;
		}
		.userSelectCont  .selectNumCont .selectNum .selectNumDiv ul li{
			float: left;
			width: 24%;
			margin: 0px 0px 5px 1%;
			text-align: center;
			line-height: 25px;
		}

		.selectNum .selectNumDiv ul li.unselect{
			background: #f1f1f1;
			color: #000;
		}
		.selectNum .selectNumDiv ul li.select{
			background: #1f72ff;
			color: #fff;
		}

		.userNewPhoneDiv{
			display: none;
		}

		.gapText{
			text-align: center;
			font-size: 14px;
			color: #888888;
			margin-top: 10px;
		}
	</style>
</head>
<body>
<div class="content">
	<div class="headerNav">
		<div class="headerNavTop"><div class="headerNavIcon headerNavIconOut"><span></span><span></span></div></div>
		<div class="headerNavCont">
			<a href="index.html">快递首页</a>
			<a href="userhome.html">个人中心</a>
			<a href="delivery.html">送货上门</a>
			<a href="sendexpress.html">我要寄件</a>
			<a href="lazyboard.html">懒人排行</a>
			<a href="expassistant.html">快递助手</a>
		</div>
	</div>

	<div class="userInfoEditCont">
		<div class="userInfoIcon">
			<img src="images/userInfoIcon.png" width="100%">
		</div>
		<div class="nickName">更改信息</div>

		<form>
			<input id="PageContext" type="hidden" value="${pageContext.request.contextPath}" />
			<input id="wxCode" type="hidden" value="${wxCode}" />
			<input type="hidden" id="userId" name="userId" value="${sysWxUser.id}">
			<div class="userInputCont">
				<div class="inputTypeCont">
					<div class="inputTitle">新的名称</div>
					<input onblur="checkName()" type="text" class="commonInput" name="name" id="name" placeholder="请输入真实姓名..." >
				</div>
				<div class="inputTypeCont">
					<div class="inputTitle">新的手机</div>
					<input onblur="checkPhone()" type="text" class="commonInputFunc userOldPhone" id="newPhone" name="usernum" placeholder="请输入新手机号码" >
					<div class="commonFuncBtnModify userModifyPhone"></div>
				</div>
				<div class="inputTypeCont">
					<div class="inputTitle">验证码</div>
					<input type="text" class="verifiInput" id="code" name="code" placeholder="请输入验证码...">
					<input type="button" class="verifiBtn" value="发送验证码" onclick="sendMessage()">
				</div>
			</div>
		</form>

		<div class="submitBtn" onclick="modify()">修改信息</div>
	</div>
</div>
</body>
<script>
		//表单验证
		function checkName(){
			var name = $("#name").val();
			//2-6位汉字
			if (name.match(/^[\u4e00-\u9fa5]{2,6}$/) == null){
				//不匹配
				layer.msg("请检查姓名格式");
				return false;
			}
			return true;
		}
		function checkPhone(){
			var newPhone = $("#newPhone").val();
			//13位手机号码
			if (newPhone.match(/^\d{11}$/) == null){
				//不匹配
				layer.msg("请检查手机号码格式");
				return false;
			}
			return true;
		}
		function checkCode(){
			var code = $("#code").val();
			//验证码
			if (code.match(/^[0-9]{6}/) == null){
				//不匹配
				layer.msg("验证码格式有误");
				return false;
			}
			return true;
		}
		function checkSubmit() {
			return checkName() && checkPhone() && checkCode();
		}
		//发送短信
		function sendMessage() {
			//手机号码格式正确则进行发送短信
			if (checkPhone()){
				//获取手机号
				var newPhone = $("#newPhone").val();
				//发送短信
				var windowId = layer.load();
				$.getJSON("/wx/updateSms.do",{newPhone:newPhone},function (data) {
					//{status:,result:}
					layer.close(windowId);
					layer.msg(data.result);
				});
			}
		}
		//修改信息
		function modify() {
			//获取手机号
			var newPhone = $("#newPhone").val();
			//姓名
			var name = $("#name").val();
			//验证码
			var code = $("#code").val();
			$.getJSON("/wx/update.do",{newPhone:newPhone,name:name,code:code},function (data) {
				layer.msg(data.result);
				if (data.status==0){
					//跳转到主页
					layer.msg('修改成功,即将跳转', {
						icon: 1,
						time: 2000 //2秒关闭（如果不配置，默认是3秒）
					}, function(){
						window.location.href="index.html";
					});
				}
			});
		}
</script>
</html>